<template>
  <div class="gamelist-container">
    <span class="list-title">{{title}}</span>
    <scroll-view class="scroll-wrapper" scroll-x="true" >
      <div class="scroll-item" v-for="(game, index) of gameList" :key="index">
        <img :src="game.gameIcon" alt="" class="game-icon"> <br/>
        <span class="game-name">{{game.gameName}}</span>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    gameList: {
      type: Array,
      default: []
    }
  },
  methods: {
    gameClicked(game) {

    }
  }
}
</script>

<style>
.gamelist-container {
  height: 200rpx;
  width: 100%;
}
.scroll-wrapper {
  overflow:hidden;
  white-space:nowrap;
  width: 100%;
  height: 100%;

}
.scroll-item {
  display: inline-block;
}
.game-icon {
  width: 160rpx;
  height: 160rpx;
}
.game-name {
  font-size: 12rpx;
}

</style>
